<div class="layui-fluid" id="VIEW-list-table" >
    <div class="layui-card">
        <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
            <div class="layui-btn layui-btn-sm" onclick="menuList.add()">添加</div>
        </div>
        <div><table class="layui-hidden" id="menuListTable" lay-skin="line" lay-size="lg" lay-filter="menuListTable"></table></div>
    </div>
</div>
<script>
    var menuList = {};
    var MenuList = function () {
        var admin = layui.admin,
            form = layui.form,
            $ = layui.jquery,
            treeGrid = layui.treeGrid,
            treeSelect = layui.treeSelect,
            iconPicker = layui.iconPicker;
        //初始化列表
        this.init = function () {
            treeGrid.render({
                id:'menuListTable'
                ,elem: '#menuListTable'
                ,api:'getMenuList'
                ,idField:'id'
                ,treeId:'id'//树形id字段名称
                ,treeUpId:'parentId'//树形父id字段名称
                ,treeShowName:'name'//以树形式显示的字段
                ,cols: [[
                    {field: 'id', title: 'ID',width:80},
                    {field:'name', title: '名称' ,width:220,templet: function(d){
                        if(d.type == 0){
                            return '<span style="color: red">'+d.name+'</span>'
                        }else if(d.type == 1){
                            return '<span style="color: green">'+d.name+'</span>'
                        }else if(d.type == 2){
                            return '<span style="color: #8b8b8b">'+d.name+'</span>'
                        }
                    }}
                    ,{field:'parentName',align:'center',width:100, title: '父级菜单',templet: function(d){
                        if(d.parentName){
                            return d.parentName
                        }else {
                            return ''
                        }
                    }}
                    ,{field:'icon',width:60,align:'center', title: '图标',templet: function(d){
                        if(d.icon){
                            return '<i class="layui-icon '+d.icon+'"></i>'
                        }else {
                            return ''
                        }
                    }}
                    ,{field:'type',width:65,align:'center', title: '类型',templet: function(d){
                        if(d.type == 0){
                            return '<span class="layui-badge layui-bg-red">目录</span>'
                        }else if(d.type == 1){
                            return '<span class="layui-badge layui-bg-green">菜单</span>'
                        }else if(d.type == 2){
                            return '<span class="layui-badge layui-bg-gray">按钮</span>'
                        }
                    }}
                    ,{field:'orderNum',width:90,align:'center', title: '排序'}
                    ,{field:'isShow',width:90,align:'center', title: '是否显示',templet: function(d){
                        if(d.isShow == 1){
                            return '<span class="layui-badge layui-bg-green">是</span>'
                        }else{
                            return '<span class="layui-badge layui-bg-gray">否</span>'
                        }
                    }}
                    ,{field:'url',align:'center', title: '菜单URL',templet: function(d){
                        if(d.url){
                            return d.url
                        }else {
                            return ''
                        }
                    }},{field:'perms',align:'center', title: '授权标识',templet: function(d){
                        if(d.perms){
                            return d.perms
                        }else {
                            return ''
                        }
                    }}
                    ,{width:130,title: '操作', align:'center'
                        ,templet: function(d){
                            var html='';
                            var addBtn='<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>';
                            var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                            return addBtn+delBtn;
                        }
                    }
                ]]
            });
            //列表操作
            treeGrid.on('tool(menuListTable)',function (obj) {
                if(obj.event === 'del'){//删除行
                    admin.confirm("是否删除？",function () {
                        admin.post({
                            api:'deleteMenu',
                            urlStr: '/'+obj.data.id,
                            contentType: 'application/json;charset=UTF-8',
                            success:function (res) {
                                if(res.code == 0){
                                    admin.success('操作成功',function () {
                                        treeGrid.delRow('menuListTable',obj.data);
                                        //menuList.refresh();
                                    });
                                }
                            }
                        });
                    })
                }else if(obj.event==="edit"){//修改
                    admin.popup({
                        url:'/sys/menu/edit',
                        title:'修改菜单',
                        area: ['50%', '88%'], //宽高
                        data: obj.data,
                        success:function (layer, index) {
                            var editMenu = new EditMenu(obj.data,index);
                            editMenu.init();
                        }
                    });
                }
            });
        };
        //新增
        this.add = function () {
            admin.popup({
                url:'/sys/menu/add',
                title:'新增菜单',
                area: ['50%', '80%'], //宽高
                success:function (layer, index) {
                    var addMenu = new AddMenu(index);
                    addMenu.init();
                }
            });
        };
        //刷新页面
        this.refresh = function () {
            admin.refresh()
        }
    };
    //引入组件
    layui.use(['treeGrid','treeSelect','iconPicker'], function () {
        menuList = new MenuList();
        menuList.init();
    });

</script>